antd 主页地址：https://ant.design/docs/react/introduce

在使用过程中，不能照搬antd的组件代码，因为有些并不合适。首先，菜单并没有做跳转功能，仅仅是菜单，需要在它的基础方法中添加我们的业务代码。

/*菜单组件，所有的方法都要bind this*/import React,{Component} from 'react';import {render} from 'react-dom';import {Link,browserHistory} from 'react-router';import Menu from 'antd/lib/menu';import Icon from 'antd/lib/icon';const SubMenu = Menu.SubMenu;const MenuItemGroup = Menu.ItemGroup;import {user_search_path,        application_search_path,navigation_search,advertising_search} from 'config';export default class Sidebar extends Component{    constructor(props){        super(props);        this.state = {            current: '1',            openKeys: []        }    }    handleClick(e) {       /*这里要做判断，判断是点击哪个菜单，就跳转到相应的菜单内容，使用router进行跳转*/        if(e.key == "1"){            browserHistory.push(user_search_path);        }else if(e.key == '2'){            browserHistory.push(application_search_path);        }else if(e.key == '3'){            browserHistory.push(navigation_search);        }else if(e.key == '4'){            browserHistory.push(advertising_search);        }        this.setState({            current: e.key,            openKeys: e.keyPath.slice(1)        });    }    onToggle(info) {        console.log('onToggle', info);        this.setState({            openKeys: info.open ? info.keyPath : info.keyPath.slice(1)        });    }    getKeyPath(key) {        const map = {            sub1: ['sub1'],            sub2: ['sub2'],            sub3: ['sub2', 'sub3'],            sub4: ['sub4'],        };        return map[key] || [];    }    render(){        return(            
     
                
                          
       
        
        用户服务}>                        
        
         设置权限
                            
                           
       
        
        配置服务}>                        
        
         app版本查询
                                
                                    
         
          导航配置查询
                                     
         
          广告配置查询
                                 
                                
        
         app changeLog
                            
                           
       
        
        短信服务}>                    
                       
                  
     
        );    }}

第二步，通过页面加载组件Parent.js，固定菜单与菜单内容的位置

import React,{Component} from 'react';import {render} from 'react-dom';import Icon from 'antd/lib/icon';import jiChu from '../../../build/images/jichu.png';import HeaderRight from '../login/HeaderRight.js';import SearchUser from '../login/SearchUser.js';import Sidebar from '../sidebar/Sidebar.js';import style from '../../../build/css/login.css';export default class Parent extends Component{    constructor(props){        super(props);    }    render(){        const headerUserPanel = (
     );        const search = (
     );        const sidebars = (
     );   /*菜单组件*/        return(            
     
                
      
                    
       
                        
        
                            
         
                                
                                      
         
                            
         
                                          {sidebars}                            
         
                            
         
                                
          
           收缩菜单                            
         
                        
        
                    
       
                
      
                
      
                    
       
                        
        
                                     {headerUserPanel}                        
        
                        
        
                            
         
                                          {this.props.children}             /*菜单组件对应内容*/                            
         
                        
        
                    
       
                
      
            
     
        );    }}

最后一步，在路由中通过path将页面与路径关联，这样我们在菜单组件中的跳转就是通过这一步控制

import React from 'react';import {render} from 'react-dom';import { Router , Redirect, Route , IndexRoute , browserHistory } from 'react-router';import { Provider } from 'react-redux'const store = configureStore();render((    
              
                  
                                  
                    
                           
       
      
     ), document.getElementById('root'));

完毕！